<template>
    <div class="more">
		<div class="top">
            <a href="javascript:history.go(-1)">
                <em><img src="../../images/return.png"></em>
            </a>
            <p>
				<router-link to="/search">
                <i><img src="../../images/search.png"></i>
				<span>请输入搜索关键词</span>
				</router-link>
            </p>
			<span><router-link to="/type"><i><img src="../../images/mo_sore.png"></i></router-link></span>	
            <span><u><img src="../../images/more.png"></u></span>			
        </div>

		<div class="title">
			<mt-navbar v-model="selected" >
				<mt-tab-item id="1" class="mt">
					<span class="sore" @click="change">综合排序<i class="i_ico"></i></span></mt-tab-item>
				<mt-tab-item id="2" class="mt">
					<span @click="clear()">销量优先</span> </mt-tab-item>
				<mt-tab-item id="3" class="mt">
					<span class="sore1" @click="choose">筛选<b class="i_ico1"></b> </span></mt-tab-item>
				<mt-tab-item id="4"><p class="pr"><i><img src="../../images/list.png"></i></p> </mt-tab-item>
			</mt-navbar>
			<ul class="sore_ul">
				<li @click="sel" id="1">
					<span>综合排序</span>
					<i><img src="../../images/ok.png"></i>
				</li>
				<li @click="sel" id="2">
					<span>价格从低到高</span>
					<i><img src="../../images/ok.png"></i>
				</li>
				<li @click="sel" id="3">
					<span>价格从高到低</span>
					<i><img src="../../images/ok.png"></i>
				</li>
				<li @click="sel" id="4">
					<span>人气排序</span>
					<i><img src="../../images/ok.png"></i>
				</li>
			</ul>
		</div>
        <mt-tab-container v-model="selected" class="content">
            <mt-tab-container-item id="1">
                <ul class="moreul">
                    <li v-for="(v,i) in more">
                        <i class="left"><img :src="v.img"></i>
                        <div class="right">
                            <span>{{v.title}}</span>
                            <u>{{v.msg}}</u>
                            <p class="price">
                                <span>{{v.price}}</span>
                                <em>降</em>
                            </p>
                            <p class="sell">
                                <u>销量</u>
                                <b>{{v.num}}</b>
                                <i><img src="../../images/more_b.png"></i>
                                <span>{{v.shop}}</span>
                            </p>

                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                 <ul class="moreul">
                    <li v-for="(v,i) in more1">
                        <i class="left"><img :src="v.img"></i>
                        <div class="right">
                            <span>{{v.title}}</span>
                            <u>{{v.msg}}</u>
                            <p class="price">
                                <span>{{v.price}}</span>
                                <em>降</em>
                            </p>
                            <p class="sell">
                                <u>销量</u>
                                <b>{{v.num}}</b>
                                <i><img src="../../images/more_b.png"></i>
                                <span>{{v.shop}}</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                 <ul class="moreul">
                    <li v-for="(v,i) in more">
                        <i class="left"><img :src="v.img"></i>
                        <div class="right">
                            <span>{{v.title}}</span>
                            <u>{{v.msg}}</u>
                            <p class="price">
                                <span>{{v.price}}</span>
                                <em>降</em>
                            </p>
                            <p class="sell">
                                <u>销量</u>
                                <b>{{v.num}}</b>
                                <i><img src="../../images/more_b.png"></i>
                                <span>{{v.shop}}</span>
                            </p>

                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
			<mt-tab-container-item id="4">
                 <ul class="more_4">
                    <li v-for="(v,i) in more">
                        <i ><img :src="v.img"></i>
                        <div class="bt">
                            <span>{{v.title}}</span>
                            <u>{{v.price}}</u>
                            <p class="sell1">
                                <u>销量</u>
                                <b>{{v.num}}</b>
                                <i><img src="../../images/more_b.png"></i>
                            </p>

                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
        </mt-tab-container>

    </div>
</template>
<script scoped>
export default{
    data(){
        return{
            selected:"1",
			flag:true,
			num:'',
			more1:{},
			more:{}
		
        }
    },
	methods:{
		change(e){
			this.flag=!this.flag;
			console.log(e.target);
			if(this.flag){
				$('.sore_ul').css("display","none");	
			}else{
				$('.sore_ul').css("display","block");
			}
			$(".i_ico").css("border-color","#ED5564 transparent transparent transparent");
			$(".i_ico1").css("border-color","#AAA transparent transparent transparent");
		},
		clear(){
			$('.sore_ul').css("display","none");
			this.flag=true;
			$(".i_ico").css("border-color","#AAA transparent transparent transparent");
			$(".i_ico1").css("border-color","#AAA transparent transparent transparent");
		},
		sel(e){	
			console.log(e.target);		
			console.log(e.target.id);

		},
		choose(){
			$('.sore_ul').css("display","none");
			this.flag=true;
			$(".i_ico").css("border-color","#AAA transparent transparent transparent");
			$(".i_ico1").css("border-color","#ED5564 transparent transparent transparent");
		}
	},
	mounted(){
		
		this.$http.get('../../data/more.json')
		.then((response)=> {
			// handle success
			console.log(response.data);
			this.more=response.data.more;
			this.more1=response.data.more1;
			
		})
		.catch(function (error) {
			// handle error
			console.log(error);
		})
		.then(function () {
			// always executed

			
		});

	


	}
}
</script>
<style scoped>
	.more{
		width:100%;
		height:100vh;
		overflow:hidden;
		background-color:#F5F5F5;
	}
/*头部搜索栏*/
    .more .top{
		height: 2.2rem;
        width: 100%;
        top: 0px;
        display: flex;
        justify-content: space-between;
        padding: 5px 0px;
        font-size: 1rem;
        text-align: center;
        background:#EEE;
        color: gray;
        z-index: 1;
	}
	.more .top>a{
        width: 3.5rem;
        line-height: 2rem;
        color: black;
        display: block;
        display: flex;
        align-items: center;
	}
	.more .top>a>em{
        width: 1.2rem;
        height: 1rem;
        margin-top: -0.8rem;
        margin-left: 20px;
        opacity: 0.7;
        display: block;
	}
	.more .top>a>em>img{
		width: 100%;
		height: 100%;
	}
	.more .top>p{
        border: 1px solid #c7c7c7;
        border-radius: 3px;
        width: 60%;
        display: block;
        position: relative;
        overflow: hidden;
        display: flex;
		background:white;
        align-items: center;
	}
	.more .top>p a{
		color:gray;
	}
	.more .top>p i{
        position: absolute;
        left: 0.2rem;
        width: 1.5rem;
        height: 1.5rem;
	}
	.more .top>p i img{
		width: 100%;
		height: 100%；
	}
	.more .top>p span{
		width: 10rem;
        float: left;
        margin-left: 1rem; 
        border:none;
        outline: none;
	}
	    .more .top>span i{
		width: 1.5rem;
		height: 1.6rem;
		margin-top: 0.2rem;
		margin-right: 5px;
		display: block;
		opacity: 0.6;
	}
   .more .top>span i>img{
        width: 100%;
        height: 100%;
	}
    .more .top>span u{
		width: 1.4rem;
		height: 1.6rem;
		margin-top: 0.2rem;
		margin-right: 14px;
		display: block;
		opacity: 0.6;
	}
   .more .top>span u>img{
        width: 100%;
        height: 100%;
	}
/*头部内容*/

	.more .mint-navbar a{
		color:gray;
	}
	.more .title .mint-navbar .mint-tab-item.is-selected{
		color:red;
		border:none;	
	}
	.more .mt{
		flex-grow:2;
	}
	.more .mint-tab-item-label{
		margin:0;
		padding:0;
		
	}
	#4{
		flex-grow:1;
	}
	.more .mt span {
		color: inherit;
		font-size: 1rem;
		line-height: 3rem;
		position:relative;
	}
	.mt span .i_ico{
		font-size: 0px;
		line-height: 0;
		vertical-align: middle;
		display: inline-block;
		width: 0px;
		height: 0px;
		margin-left: 0.3rem;
		border-width: 0.3rem;
		border-color: #ED5564 transparent transparent transparent;
		border-style: solid dashed dashed dashed;
	}
	.mt span .i_ico1{
		font-size: 0px;
		line-height: 0;
		vertical-align: middle;
		display: inline-block;
		width: 0px;
		height: 0px;
		margin-left: 0.3rem;
		border-width: 0.3rem;
		border-color: #AAA transparent transparent transparent;
		border-style: solid dashed dashed dashed;
	}
	.more .mint-navbar .mint-tab-item{
		margin: 0;
		padding: 0;
	}
	.title{
		height: 3rem;
		margin-top: 0.2rem;
		position: relative;
		border-top: 1px solid #dfdfdf;
		border-bottom: 1px solid #dfdfdf;
	}
	.title .mint-navbar a:nth-of-type(4){
		border-left: 1px solid #dfdfdf;
	}
	.more .pr{
		height:100%;
		display: block;
		margin-top:30px;
	} 
	.more .pr>i{
		width: 1.5rem;
		height: 1.5rem;
		position: relative;
		left: 50%;
		margin-left: -0.75rem;
		display: block;
		top: 50%;
		margin-top: -1.1rem;
	}
	.more .pr>i img{
		width:100%;
		height:100%;
	}
	.more .title>ul{
		width:100%;
		position:absolute;
		background:white;
		top:3rem;
		padding:0 10px;
		overflow:hidden;
		z-index:2;
		display:none;
	}
	.more .title>ul>li{
		height:3rem;
		width:100%;
		color:gray;
		font-size:1rem;
		line-height:3rem;
		padding-left: 10px;
		border-top:0.1rem solid #EEE;	
	}
	.more .title>ul>li>span{
		float:left;
	}
	.more .title>ul>li>i{
		width:1rem;
		height:1rem;
		display:block;
		float:right;
		margin-right: 2rem;
	}
	.more .title>ul>li>i img{
		width:100%;
		height:100%;
	}
/*主要内容*/
	.content{
		overflow: hidden;
		position: relative;
		height: 100%;
		width: 100%;
	}
    .moreul{
		width: 100%;
		height:100%;
		background: white;
    }	
	.moreul>li{
		width: 100%;
	}
	.moreul .left{
		width: 7rem;
		height: 7rem;
		display: block;
		margin: 0.5rem 0.5rem;
		float: left;
	}
	.moreul .left img{
		width:100%;
		height:100%;
	}
	.moreul .right{
		height:8rem;
		width: 64%;
		border-bottom: 1px solid #EEE;
		margin: 0;
		float:right;
		padding: 0;
	}
	.right>span{
		height: 2.5rem;
		padding-top: 0.4rem;
		display: block;
		overflow: hidden;
		font-size: 1rem;
		line-height: 1.2rem;
		padding-right: 10px;
	}
	.right>u{
		height: 1.2rem;
		overflow: hidden;
		display: block;
		line-height: 1.2rem;
		font-size: 0.8rem;
		color: gray;
		padding-right: 10px;
		text-decoration: none;
	}
	.right>.price{
		height: 1.8rem;
		display: block;
		padding-right: 15px;
	}
	.price>span{
		height: 1.8rem;
		color: red;
		line-height:1.8rem;
		display: block;
		float: left;
	}
	.price>em{
		width: 1rem;
		height: 1rem;
		font-size:0.8rem;
		color:white;
		position:relative;
		text-align:center;
		line-height:1rem;
		top:50%;
		margin-top:-0.5rem;
		display: block;
		background: #EC5464;
		float: right;
	}
	.sell{
		height:1.8rem;
		display: block;
		padding-right: 15px;
	}
	.sell>u{
		line-height: 1.8rem;
		font-size: 1rem;
		margin-right:0.2rem;
		display: block;
		text-decoration: none;
		color: gray;
		float: left;
	}
	.sell>b{
		line-height: 1.8rem;
		font-size: 0.8rem;
		position: relative;
		top: 0.1rem;
		display: block;
		float: left;	
	}
	.sell>i{
		width: 1rem;
		height: 1rem;
		position: relative;
		top: 50%;
		margin-top: -0.5rem;
		display: block;
		float: right;
		opacity: 0.6;
	}
	.sell>i img{
		width:100%;
		height:100%;
	}
	.sell>span{
		line-height: 1.8rem;
		font-size:1rem;
		display: block;
		float: right;
		margin-right: 0.5rem;
		color: gray;
	}
	.more .more_4{
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: wrap;
	  }
	.more .more_4>li{
		width: 40%;
		height: 15rem;
		background: white;
		margin: 0.5rem;
		padding: 0px 0.5rem;
	  }
	.more .more_4>li>i{
	  	width: 100%;
	  	height: 10rem;
	  	display: block;
	  }
	.more .more_4>li>i img{
	  	width: 100%;
	  	height: 100%;
	  }
	.more .bt{
	  	width: 100%;
	  	height: 6rem; 
	  }
	.more .bt>span{
		width: 100%;
		height: 1.5rem;
		display: block;
		line-height: 1.5rem;
		overflow: hidden;
		font-size: 0.8rem;
	}
	.more .bt>u{
	  	text-decoration: none;
	  	color: red;
	  	width: 100%;
	  	font-size: 1rem;
	  	line-height: 1.5rem;
	  }
	.more .bt>p{
	  	width: 100%;
	  	height: 2rem;
	  }
	.more .bt>p>u{
	  	float: left;
	  	font-size: 0.9rem;
	  	color: gray;
	  }
	.sell1{
		height:1.8rem;
		display: block;
		padding-right: 15px;
	}
	.sell1>u{
		line-height: 1.8rem;
		font-size: 1rem;
		margin-right:0.2rem;
		display: block;
		text-decoration: none;
		color: gray;
		float: left;
	}
	.sell1>b{
		line-height: 1.8rem;
		font-size: 0.8rem;
		position: relative;
		top: 0.1rem;
		display: block;
		float: left;	
	}
	.sell1>i{
		width: 1rem;
		height: 1rem;
		position: relative;
		top: 50%;
		margin-top: -0.5rem;
		display: block;
		float: right;
		opacity: 0.6;
	}
	.sell1>i img{
		width:100%;
		height:100%;
	}
</style>